$role_item_height: 160px;
$role_item_title_width: 40px;

.bpm-shower-container {

    position:relative;

    .bpm-role-item {
        border:1px solid #ddd;
        position:relative;
        height:$role_item_height;
        margin-top:-1px;
        padding-left: $role_item_title_width;

        .role-title {
            border-right:1px solid #ddd;
            margin:0;padding:0;
            position:absolute;
            text-align:center;
            left:0; top:0;
            height:$role_item_height;
            font-size:14px;
            width:$role_item_title_width;

            -webkit-box-align: center;
            -moz-box-align: center;
            -webkit-box-pack: center;
            -moz-box-pack: center;
            display: -webkit-box;
            display: -moz-box;

            label {
                writing-mode: vertical-rl;
                -webkit-writing-mode: vertical-rl;
                display:block;
                margin:10px 0;
            }
        }

        .bpm-widgets-container {
            margin:0;
            width:100%;
            height:100%
        }
    }
}

.bpm-role-list {
    position:relative;
    z-index:2;
}

.bpm-role-item {
    position:absolute;
    top:0;

    .bpm-widgets-container {
        position:relative;
        left:0;top:0;
        width:100%;
        height:100%;
    }

    .bpm-widget {
        -webkit-box-align: center;
        -moz-box-align: center;
        -webkit-box-pack: center;
        -moz-box-pack: center;
        display: -webkit-box;
        display: -moz-box;
        text-align:center;
        margin:0;
        position:absolute;
        max-height: $role_item_height;
        background:#fff;
        word-break:break-all;
        padding:3px;
        z-index:2;

        label {
            display:inline;
            font-weight:normal;
        }
    }

    .bpm-widget.active {
        .ui-resizable-handle {
            display:block !important;
        }
    }
    .bpm-widget-general {
        width:100px;height:70px;
        border:2px solid #222;
    }
    .bpm-widget-start, .bpm-widget-end {
        width:120px;height:50px;
        border:2px solid #222;
        border-radius: 20px;
    }
    .bpm-widget-cond {
        width:70px;height:70px;
        margin:5px;
    }
    .bpm-widget-cond:after {
        content: ' ';
        display:block;
        position:absolute;
        left:0;top:0;
        width: 70px;height:70px;
        border:2px solid #222;
        transform:rotate(-45deg);
    }

}


.bpm-line {
    position: absolute;
    z-index:1;
    width:0;height:0;
    margin-left:40px;

    .bpm-line-active-item {
        position:absolute;
        width:8px;height:8px;
        border:1px solid rgb(136, 51, 51);
        left:50%;top:50%;
        margin-left:-6px;margin-top:-4px;
        background: #fff;
    }
}

.node-setting-modal {
    width: 800px;

    .chosen-container {
        width:100% !important;
    }
}

.ui-resizable-se {
    width: 9px;
    height: 9px;
    right: -5px;
    bottom: -5px;
}

.dropdown-header {
    font-style: italic;
    padding:0;
    a {
        color: #bbb !important;
        :hover {
            background: #fff;
        }
    }
    :hover {
        background: #fff;
    }
}
.ui-resizable-handle {
    border:1px solid rgb(136, 51, 51);
    background:#fff;
}

.builder-toolbar {
    margin-bottom:15px;
}

.bpm-editable-field-row {
    margin-bottom:8px;
    .chosen-container {
        width:100% !important;
    }
}